import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 引入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
console.log(THREE.Scene)

//创建一个虚拟3D场景
const scene = new THREE.Scene()
//给场景添加一个物体 长方体
// const geometry = new THREE.BoxGeometry(100, 100, 100)
// const material = new THREE.MeshLambertMaterial({ color: 0x0000ff, transparent: true, opacity: 0.5 })
// const mesh = new THREE.Mesh(geometry, material)
// mesh.position.set(0, 0, 0)
// scene.add(mesh)
//光照
const directionalLight = new THREE.DirectionalLight(0xffffff, 3.0)
directionalLight.position.set(80, 100, 150)
scene.add(directionalLight)
const axesHelper = new THREE.AxesHelper(1000)
scene.add(axesHelper)
const width = 800
const height = 800
//设置相机
const camera = new THREE.PerspectiveCamera(30, width / height, 10, 3000)
camera.position.set(200, 200, 200)
// camera.lookAt(mesh.position)
//创建webGl渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true
  //   canvas: canvas
})
renderer.setPixelRatio(window.devicePixelRatio) // 设置像素比(告诉threejs避免模糊情况)
// document.body.appendChild(renderer.domElement)
renderer.setSize(width, height)
renderer.setClearColor(0x9999999)
// renderer.render(scene, camera)
const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', function () {
  //   renderer.render(scene, camera)
  console.log(camera.position, 'position')
})
function render() {
  renderer.render(scene, camera)
  //   controls.update()
  //   mesh.rotateY(0.01)
  requestAnimationFrame(render)
}
//如果是全屏监听屏幕变化
window.addEventListener('resize', function () {
  camera.aspect = 1
  renderer.setSize(800, 800)
  camera.updateProjectionMatrix() //宽高发生变化更新相机参数
})
render()
//获取像素比
console.log(window.devicePixelRatio)

//加载外部模型
const loader = new GLTFLoader()
loader.load('../../public/长方体.glb', function (gltf) {
  console.log(gltf.scene)
  scene.add(gltf.scene)
})
export default renderer
